<template>
	<div v-loading="loading" element-loading-spinner="el-icon-loading">
		<!-- 代理账号信息 -->
		<div class="block pr10">
			<p class="name">
				{{
					$t(
						'funds.fund_audit.agent_withdrawal_review_detail_title_2'
					)
				}}
			</p>
			<div class="block-content">
				<el-table
					v-loading="proxyAccountLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="[1]"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						align="center"
						:label="$t('funds.proxy_name')"
					>
						<template>
							{{ proxyAccountInfo.userName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.parent_proxy_account')"
					>
						<template>
							{{ proxyAccountInfo.parentProxyName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.belong_merchant')"
					>
						<template>
							{{ proxyAccountInfo.merchantName || '' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.account_status')"
					>
						<template>
							<span
								v-if="proxyAccountInfo.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="proxyAccountInfo.paymentLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="
									proxyAccountInfo.loginLockStatus === 0 &&
										proxyAccountInfo.paymentLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.register_time')"
					>
						<template>
							{{ proxyAccountInfo.createdAt || '-' }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 应收返点统计 -->
		<div class="block pr10 mt20">
			<ProxyRebateSummary
				:detailData="proxyRebateDetail"
				:key="selecteSumaryKey"
			></ProxyRebateSummary>
		</div>
		<!-- 团队返点明细-直属会员贡献明细 -->
		<el-row class="mt20 pr10">
			<el-col :span="24">
				<el-tabs
					v-model="activeTab"
					@tab-click="clickTeamOrMemberRebate"
				>
					<el-tab-pane
						:label="$t('funds.fund_audit.team_rebate_detail')"
						name="1"
					>
						<ProxyRebateDetail
							v-if="activeTab === '1'"
							:detailData="proxyRebateDetail"
							:key="selecteDetailKey"
						></ProxyRebateDetail>
					</el-tab-pane>
					<el-tab-pane
						:label="$t('funds.fund_audit.direact_member_detail')"
						name="2"
					>
						<ProxyRebateDetail
							v-if="activeTab === '2'"
							:detailData="proxyRebateDetail"
							:key="selecteDetailKey"
						></ProxyRebateDetail>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
		<!-- 审核信息 -->
		<template v-if="detailData.proxyName === selectedData.userName">
			<div
				class="block mt20 pr10"
				v-if="auditInfoList[0] && auditInfoList[0].lockOperator"
			>
				<p class="name">
					{{ $t('funds.fund_audit.audit_info') }}
				</p>
				<div class="block-content">
					<el-row>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_user_1') }}:
							{{
								(auditInfoList[0] &&
									auditInfoList[0].lockOperator) ||
									'-'
							}}
						</el-col>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_time_1') }}:
							{{
								(auditInfoList[0] &&
									auditInfoList[0].auditTime) ||
									'-'
							}}
						</el-col>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_remark_1') }}:
							<span class="txtfeed">
								{{
									(auditInfoList[0] &&
										auditInfoList[0].auditDesc) ||
										'-'
								}}
							</span>
						</el-col>
					</el-row>
				</div>
				<div
					v-if="auditInfoList[1] && auditInfoList[1].lockOperator"
					class="block-content"
				>
					<el-row>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_user_2') }}:
							{{
								(auditInfoList[1] &&
									auditInfoList[1].lockOperator) ||
									'-'
							}}
						</el-col>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_time_2') }}:
							{{
								(auditInfoList[1] &&
									auditInfoList[1].auditTime) ||
									'-'
							}}
						</el-col>
						<el-col :span="8" :offset="0">
							{{ $t('funds.fund_audit.audit_remark_2') }}:
							<span class="txtfeed">
								{{
									(auditInfoList[1] &&
										auditInfoList[1].auditDesc) ||
										'-'
								}}
							</span>
						</el-col>
					</el-row>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'
import ProxyRebateDetail from '@/components/Funds/ProxyRebateDetail'
import ProxyRebateSummary from '@/components/Funds/ProxyRebateSummary'

export default {
	components: { ProxyRebateDetail, ProxyRebateSummary },
	mixins: [list],
	props: {
		isAudit: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			default: () => {}
		},
		selectedData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			proxyAccountLoading: false,
			proxyAccountInfo: {},
			auditInfoList: [],
			activeTab: '1',
			loading: false,
			proxyRebateDetail: {
				proxyId: 0,
				reportType: 1,
				reportDate: undefined
			},
			selecteSumaryKey: 0,
			selecteDetailKey: 0
		}
	},
	watch: {
		selectedData: {
			handler(next) {
				if (next.type === 1 && next.userName) {
					this.proxyRebateDetail = {
						proxyId: this.selectedData.id,
						reportType: this.activeTab,
						reportDate: this.detailData.reportDate
					}
					this.selecteSumaryKey = Math.random()
					this.selecteDetailKey = Math.random()
					this.getProxyAccountDetail()
					this.getProxyRebateInfo()
				}
			},
			immediate: true
		}
	},
	mounted() {
		this.proxyRebateDetail.reportDate = this.detailData.reportDate
	},
	methods: {
		// 获取审核信息
		getProxyRebateInfo() {
			this.auditInfoList = []
			if (this.detailData.proxyName === this.selectedData.userName) {
				const params = {
					proxyId: this.selectedData.id || this.detailData.proxyId,
					id: this.detailData.id
				}
				this.$api.getProxyRebateAuditDetail(params).then((res) => {
					this.auditInfoList =
						res.data?.proxyRebateAuditDetailList || []
				})
			}
		},
		// 获取代理账号信息
		getProxyAccountDetail() {
			const params = {
				userName:
					this.selectedData.userName || this.detailData.proxyName,
				merchantId: this.detailData.merchantId
			}
			this.proxyAccountLoading = true
			// this.proxyAccountInfo = []
			this.$api
				.getProxyAccountInfo(params)
				.then((res) => {
					this.proxyAccountLoading = false
					this.proxyAccountInfo = res.data || {}
				})
				.catch(() => {
					this.proxyAccountLoading = false
				})
		},
		clickTeamOrMemberRebate() {
			this.proxyRebateDetail.reportType = this.activeTab
			this.selecteDetailKey = Math.random()
		}
	}
}
</script>

<style lang="scss" scoped>
.block {
	margin-top: 20px;
	.name {
		font-weight: 600;
		color: #303133;
	}
	.block-content {
		position: relative;
		width: 100%;
		margin-top: 15px;
	}
}
</style>
